<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <script>
    // 1.移除数组 [1, 2, 3, 4, 2] 中的2。不要直接修改数组，结果返回新的数组
    var arr = [1, 2, 3, 4, 2]
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] != 2) {
        newArr.push(arr[i]);
      }
    }
    console.log(newArr)

    var arr = [1, 2, 3, 4, 2];
    var newArr = arr.filter(item => item !== 2);
    console.log(newArr); // [1, 3, 4]

    // 2.定义一个函数,能在数组 [1, 2, 3, 4, 2] 的 "2"后面添加元素 "JavaScript"。不要直接修改数组 arr，结果返回新的数组
    var arr = [1, 2, 3, 4, 2];
    function add(arr, name) {
      var newArr = arr.filter(item => item !== 2);
      var newArr2 = arr.filter(item => item === 2);
      for (let i = 0; i < newArr2.length; i++) {
        newArr.push(newArr2[i], name);
      }
    }
    console.log(add(arr, "javasceipt"))


    // 3.统计数组 [1, 2, 3, 4, 2] 中2出现的次数
    var arr = [1, 2, 3, 4, 2]
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] == 2) {
        newArr.push(arr[i]);
      }
    }
    console.log(newArr.length)

    // 4.找出数组 [1, 2, 3, "JavaScript", 4, "JavaScript", 2, 4, "JavaScript"] 中重复出现过的元素,并用数组将重复元素装起来输出
    let arr = [1, 2, 3, "JavaScript", 4, "JavaScript", 2, 4, "JavaScript"];

    let uniqueValues = [...new Set(arr)];

    console.log(uniqueValues);


    // 5.在数组里面输出年龄小于17的对象
    let arr5 = [
      {
        name: '111',
        sex: 'boy',
        age: 18,
      },
      {
        name: '222',
        sex: 'girl',
        age: 17,
      },
      {
        name: '333',
        sex: 'boy',
        age: 16,
      },
      {
        name: '444',
        sex: 'girl',
        age: 15,
      },
      {
        name: '555',
        sex: 'boy',
        age: 20,
      },
    ];

    let under17 = arr5.filter(obj => obj.age < 17);

    console.log(under17);

    // 6. 数组扁平化, 把数组[1, [2, [3, 4, 5]]]转成[1, 2, 3, 4，5] (多维数组 --> 一维数组)
    console.log(arr.flat(Infinity));




    function fn(arr) {
      let newArr = []
      for (let i = 0; i < arr.length; i++) {
        if (!array.isArray(arr[i])) {
          newArr.push(arr[i]);

        } else {
          newArr = newArr6.concat(arr[i]);
        }
        return newArr
      }
    }


    // 7. 使用reduce实现[1,2,3,4,9]数组中所有成员的和
    let array = [1, 2, 3, 4, 9];

    let sum = array.reduce((total, currentValue) => {
      return total + currentValue;
    }, 0);

    console.log(sum);

    // 8. 数组去重的方法 (4种)
    //1.

    function removeDuplicatedItem(ar) {
      var ret = [];

      for (var i = 0, j = ar.length; i < j; i++) {
        if (ret.indexOf(ar[i]) === -1) {
          ret.push(ar[i]);
        }
      }

      return ret;
      //Set类数组去重
      var arr = [1, 2, 2, 3, 3, 4, 4, 1, 5, 6, 6, 5]
      function unique(arr) {
        return Array.from(new Set(arr))
      }

      console.log(unique(arr))
      //[1,2,3,4,5,6]
      //.for循环嵌套for循环
      var arr = [1, 2, 2, 3, 3, 4, 4, 1, 5, 6, 6, 5];

      function unique(arr) {
        for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
          for (var j = i + 1; j < arr.length; j++) {   // 再次遍历数组
            if (arr[i] == arr[j]) {          // 判断连个值是否相等
              arr.splice(j, 1);           // 相等删除后者
              j--;
            }
          }
        }
        return arr
      }
      console.log(unique(arr));

      //indexOf去重
      var arr = [1, 2, 2, 3, 3, 4, 4, 1, 5, 6, 6, 5];
      function unique(arr) {
        if (!Array.isArray(arr)) {
          console.log('错误！')
          return
        }
        var array = [];
        for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
          if (array.indexOf(arr[i]) === -1) {   // 判断索引有没有等于
            array.push(arr[i])
          }
        }
        return array
      }
      console.log(unique(arr));
      //利用filter
      var arr = [1, 2, 2, 3, 3, 4, 4, 1, 5, 6, 6, 5];
      function unique(arr) {
        return arr.filter((item, index, arr) => {
          //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
          return arr.indexOf(item) === index;
        });
      }
      console.log(unique(arr));


      document.getElementById("id")
      document.getElementsByTagName("div")


      function getstle() {
        console.log(box.style.width);
        console(box.style.cssText.split(";"));
        var pox = document.querySelector(".pox");
        pox.style.cssText = "";
      }
      var box = document.querySelector(".box");
      function handlerActivbe() {
        box.classList.add("active")


      }
      function handlerActivbe() {
        box.classList.remove("active")
      }
      var lis = document.querySelectorAll("li");
      for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("index", i)

      }
      function handlerActivbe() {
        var res = lis[i].getAttribute('index')
        console.log(res)
      }
      function cleararr() {
        for (var i = 0; i < lis.length; i++) {
          lis[i].removeAttribute("index")
          data - index; data - src;
        }
      }
      var dis = document.querySelectorAll("div");
      function handlerActivbe() {
        console.log(divs[0].dataset.index)
      }
      function sethtml() {
        box.innerHTML = "<em>kjbibuibiu<em>"
      }
      function setText() {
        box.innerHTML = "kjbikbkibibiu"
      }
      var box = document.querySelector(".box");
      function changehhhh() {
        box.classList.add("active");
      }
      function changePositiib() {
        box.style.left = box.offsetleft + 100 + "px"
      }
      function getMin(arr) {
        var min = arr[0];
        var index = 0;
        for (var i = 1; i < arr.length; i++) {
          if (arr[i] < min) {
            min = arr[i]
            index = i;
          }
        } return min;
        var pos = document.querySelectorAll(".pox")[1];
        console.log(pox.nextElementSibling);
        console.log(pox.previousElementSibling);
        console.log(box.children)
        console.log(box.parentNode)
        var box = document.getElementById("BOX");
        function handlerActivbe() {
          box.remove();
        }
        function handlerActivbe() {
          document.body.appendChild(box);
        }
        function handlerActivbe() {
          document.body.appendChild(box.cloneNode(true));
        }

        function handlerActivbe{

        }

        var btn3 = document.getElementById("btns");
        function handlerActivbe() {
          console.log("hello world");
          btn3.removeEventListener("click", handlerActivbe);
        }
        btn3.addEventListener("click,handlerclik3")


        var btn2 = document.getElementById("btn2");
        function handlerclik3(e) {
          e = e || event;
          console.log(e);

          console.log(e.offsetX, e.offsetY);
          console.log("page", e.pageX, e.pageY);
          console.log(e.clientX, e.clientY);
        }
        btn2.addEventListener("click", handlerclik3)



        var box = document.querySelector(".box");
        var width = box.offsetHeight;
        var height = box.offsetWidth;
        function setAttribute(e) {
          e = e || event;
          box.style.left = e.pageX - width / 2 + "px";
          box.style.top = e.pageY - height / 2 + "px";
        }
        document.addEventListener("click", setAttribute)

        var top_bar = document.querySelector(".top-bar");
        function dragStrat(e) {
          e = e || event;
          document.addEventListener("mousemove", dragMove);
        }
        top_bar.addEventListener("mosusedown", dragStrat)

        n + 1, n ^ 2
        var interval= setInterval( function(){
        var item= position.pop();
        drag.style.left=item.x +"px";
        drag.style.left=item.x +"px";
         if (position.length ===0){
          clearInterval(interval)
         }
        })

        handlerActivbe(){
          if (e.keycode ===65 && e.ctrlkey){
            console.log("biibic")
          }
        }
        document.addEventListener("keydown",handlerActivbe);


        function foo(a,b){
          console.log(this, a,b);
        }
        var obj={
          name: "这是新的对象"
        }
        foo.call(obj,10,20);

        let arr=[10,20,30,40];
        let res= arr.map( item => '<li>'+ item +'</li>').join("");
        let res2= arr.filter( item => item <30);
        let res3= arr.reduce( (prev, item )=> prev + item);

        obj[0]="xxx"


        let obj={


          ...obj1,
          ...obj2,
          e:5,
          f:6
        }
        let obj = Object.assign({e:5, f:6 }, obj1,obj2)

    let  obj={
      c:20,
      d:40,
      ...obj
    }
    
    let letter = "0";
    let str=' hello ${letter}w ${lettter}'



    import * as module from "./hhdsohf.js";()
    console.log( MIDIAc);



    let set = new Set();
    arr= [... new Set(arr2)].join("");


    arr= Array.from(new Set(arr2));
    console.log( ar)


    let set4 = new Set([1,2,3]);
    console.log(set4.has(5));
    set4.delete(3)


    











  </script>
</body>

</html>